<template>
  <el-row class="board-page-wrapper">
    <section class="query-container">
      <el-row :gutter="10">
        <el-col :span="8">
          <span class="query-label">学年*</span>
          <el-select size="small" v-model="query.studyYearChoose">
            <el-option
              v-for="(item, index) in studyYearList"
              :label="item.label"
              :value="item.id"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="8">
          <span class="query-label">学期*</span>
          <el-select size="small" v-model="query.studyWeekChoose">
            <el-option
              v-for="(item, index) in studyWeekList"
              :label="item.label"
              :value="item.id"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="8" style="display: flex;flex-direction: row-reverse;">
          <el-button size="small" style="margin-left: 10px;" @click="resetQuery">清空</el-button>
          <el-button size="small">搜索</el-button>
        </el-col>
      </el-row>
      <div class="tip-container">
        不合格的用红色标识，通过补考或重修及格的用蓝色标识 【2020-2021学年1学期】正常考成绩未开放查询!
      </div>
    </section>
    <section class="board-table-wrapper">
      <el-table :data="tableData" :border="true" :row-class-name="tableRowClassName" style="width: 100%" ref="table">
        <!-- <el-table-column type="selection" width="45" align="center"> </el-table-column> -->
        <el-table-column prop="id" label="查看" align="center"> </el-table-column>
        <el-table-column prop="month" label="学年" align="center"> </el-table-column>
        <el-table-column prop="departName" label="学期" align="center"> </el-table-column>
        <el-table-column prop="name" label="课程代码" align="center"> </el-table-column>
        <el-table-column prop="idCard" label="课程名称" align="center"> </el-table-column>
        <el-table-column prop="levelSalary" label="课程性质" align="center"> </el-table-column>
        <el-table-column prop="postSalary" label="学分" align="center"> </el-table-column>
        <el-table-column prop="serviceAllowance" label="成绩" align="center"> </el-table-column>
        <el-table-column prop="courseRemark" label="成绩备注" align="center"> </el-table-column>
        <el-table-column prop="gpa" label="绩点" align="center"> </el-table-column>
        <el-table-column prop="achievement" label="成绩性质" align="center"> </el-table-column>
        <el-table-column prop="isVoid" label="是否成绩作废" align="center"> </el-table-column>
        <el-table-column prop="isDegreeCourse" label="是否学位课程" align="center"> </el-table-column>
        <el-table-column prop="openCollege" label="开课学院" align="center"> </el-table-column>
        <el-table-column prop="courseMark" label="课程标记" align="center"> </el-table-column>
      </el-table>
    </section>
  </el-row>
</template>

<script>
  export default {
    data() {
      return {
        query: {
          studyYearChoose: '',
          studyWeekChoose: ''
        },
        studyYearList: [
          {
            label: '2020',
            id: '1'
          },
          {
            label: '2021',
            id: '2'
          }
        ],
        studyWeekList: [
          {
            label: '2020',
            id: '1'
          },
          {
            label: '2021',
            id: '2'
          }
        ],
        tableData: [
          {
            id: 1010206020,
            month: '20201221',
            departName: '1',
            status: 1
          },
          {
            id: 1010206021,
            month: '20191221',
            departName: '2',
            status: 2
          },
          {
            id: 1010206022,
            month: '20181221',
            departName: '3',
            status: 3
          }
        ]
      }
    },
    mounted() {},
    methods: {
      tableRowClassName({ row, rowIndex }) {
        if (row.status === 2) {
          return 'no-qualified'
        } else if (row.status === 3) {
          return 'make-up-examination'
        } else {
          return ''
        }
      },
      resetQuery() {
        this.query = {}
      }
    },
    components: {}
  }
</script>

<style lang="scss" scoped>
  .board-page-wrapper {
    padding: 10px;
    .query-container {
      padding: 10px 30px;
      display: flex;
      margin-left: -15px;
      margin-right: -15px;
      flex-wrap: wrap;
      .el-row {
        line-height: 32px;
        padding: 5px 15px;
        width: 100%;
        .el-col {
          display: flex;
          flex-wrap: nowrap;
          .query-label {
            width: 70px;
            text-align: right;
            margin-right: 5px;
          }
          .el-input,
          .el-select {
            width: calc(100% - 70px);
          }
        }
      }
      & > div {
        line-height: 32px;
        padding: 0 15px;
      }
    }
  }
</style>
<style lang="scss">
  .el-table__row.no-qualified {
    background-color: #f00 !important;
    color: #fff;
    &:hover {
      td {
        background-color: #f00 !important;
      }
    }
  }
  .el-table__row.make-up-examination {
    background-color: #00f !important;
    color: #fff;
    &:hover {
      td {
        background-color: #00f !important;
      }
    }
  }
</style>
